<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>学生成绩管理系统</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>

<!--学生权限-->
<div class="container-fluid" >

    <div style="margin: 20px 20px">
        <a href="/login/user"><font size="4px" style="margin-left:1200px">退出登录</font></a>
    </div>

    <h2 align =center>科目成绩表</h2>

    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchName" name="searchName" placeholder="请输入要查询的学生名字">
        </div>
        <button type="button" class="btn btn-default btn-primary" onclick="searchStudent();">查询</button>
    </form>

    <table class="table table-bordered table-striped table-hover" style="table-layout:fixed;" id="scTable">
    </table>
</div>


<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
    //查询
    function searchStudent(){
        $('#scTable').bootstrapTable("destroy");
        loadTable();
    }


    function loadTable(){
        $('#scTable').bootstrapTable({
            url:'/webapi/sc/getByPage',
            striped:true,//true隔行变色效果
            pagination:true,//true在底部显示分页条
            singleSelect: false,//true禁止多选
            pageSize:10,//如果设置了分页，每条数据条数
            pageNumber:1,//如果设置了分页,首页页码
            sidePagination: "server",//设置在哪里进行分页，可选值为“client”
            queryParams:function (params){
                var paraObj={
                    size: params.limit,
                    page:params.offset/params.limit,
                    sort:"id",
                    direct:"desc",
                    name:$("#searchName").val()
                };
                return paraObj;
            },
            columns:[{
                field:'id',
                title:'序号',
                align : 'center'
            },{
                field:'sno',
                title:'学号',
                align : 'center'
            },{
                field:'name',
                title:'姓名',
                align : 'center'
            },{
                field:'cno',
                title:'课程号',
                align : 'center'
            },{
                field:'cname',
                title:'课程名',
                align : 'center',
            },{
                field:'score',
                title:'成绩',
                align : 'center'
            }]
        });
    }//end of loadTable()
    $(function(){
        loadTable();
        $('#myModal').modal('hide')
    })

</script>

</body>
</html>



